<style>
    .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {height:34px;line-height:34px;padding:0 8px;}
</style>
<body>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    {{# if(d.type=='0'){ }}
       <a class="layui-btn layui-btn-blue layui-btn-xs" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>

    {{# }else if(d.type=='1'){ }}
        <a class="layui-btn layui-btn-blue layui-btn-xs" lay-event="add">添加</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{# }else{ }}
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{# } }}

</script>
<script>
    layui.use(['table', 'axios','form','miniPage','treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var axios = layui.axios;
        var miniPage = layui.miniPage;
        var form = layui.form;
        //加载渲染页面 treetable
        window.reload=function(){
            renderTable();
        }

        // 渲染表格
       var renderTable=function(){
           layer.load(2);
           treetable.render({
               treeColIndex: 1,
               treeSpid: -1,
               treeIdName: 'authorityId',
               treePidName: 'parentId',
               elem: '#munu-table',
               url: 'http://localhost:9999/dept/deptAll',
               page: false,
               treeDefaultClose:false,
               cols: [[
                   {type: 'numbers'},
                   {field: 'name', width: 300, title: '科室名称'},

                   {
                       field: 'type', width: 240, align: 'center', templet: function (d) {
                           if (d.type == 0) {
                               return '<span class="layui-badge layui-bg-gray">医院</span>';
                           }
                           if (d.type == 1) {
                               return '<span class="layui-badge layui-bg-blue">科室</span>';
                           } else {
                               return '<span class="layui-badge-rim">部门</span>';
                           }
                       }, title: '类型'
                   },
                   {field: 'sort',width:100, title: '排序'},
                   {
                       field: 'status', width: 120, align: 'center', templet: function (d) {
                           if (d.status == 0) {
                               return '<span class="layui-badge layui-bg-gray">禁用</span>';
                           }
                           if (d.status == 1) {
                               return '<span class="layui-badge layui-bg-blue">正常</span>';
                           }
                       }, title: '状态'
                   },
                   {templet: '#auth-state', width: 230, align: 'center', title: '操作'}
               ]],
               done: function () {
                   layer.closeAll('loading');
               }
           });
       }

       //初次加载需要调用
        renderTable();

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //数据的渲染
        function setFormValues(data){
            debugger
            // if(data.status==1){
            //     data.status='ON';
            // }else{
            //     data.status='OFF';
            // }
            form.val("updateForm",{
                id:data.id,
                name:data.name,
                sort:data.sort,
                status:data.status,
                type:data.type,
                parentId:data.parentId

            })

        }


        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'delete') {

                axios.post('dept/delete',{id:data.id}).then(function(response){
                    debugger
                    if(response.data.code==200){
                        layer.msg(response.data.msg);
                        //重新加载表格
                        window.reload()
                    }
                    //关闭弹出页面
                    layer.close(parentIndex);
                }).catch(err=> {
                        console.log(err);
                    }
                );
                return false;

            } else if (layEvent === 'edit') {
                //修改功能
                var content = miniPage.getHrefContent('page/dept/update.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '修改科室',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['60%', '60%'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                //调用渲染数据
                setFormValues(data);

                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }else{
                var content = miniPage.getHrefContent('page/dept/add.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '添加科室',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['60%', '60%'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                //设置隐藏值信息
                $("#type").val(data.type+1);
                $("#parentId").val(data.id);
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });
    });
</script>
</body>
</html>